<template>
  <div class="info-card">
    <div class="info-card__header">
      <div class="info-card__title">{{ title }}</div>
      <div class="info-card__rightText" @click="clickRightText">{{ rightText }}</div>
      <div class="info-card__right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="info-card__content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component({
  name: 'InfoCard'
})
export default class InfoCard extends Vue {
  @Prop() title?: string;
  @Prop() rightText?: string;

  @Emit('click-right-text')
  clickRightText() { }
}
</script>

<style lang="scss" scoped>
.info-card {
  border-radius: 8px;
  box-shadow: 0 0.93px 2.79px 0 rgba(239, 242, 248, 0.8);

  &__header {
    width: 100%;
    // background: #fff;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-bottom: 1px solid #dcdfe6;
    color: #333;
    font-size: 16px;
    background: linear-gradient(132deg, #f2f4ff, rgba(232, 244, 255, 1), rgba(205, 207, 255, 0.5));
    border-radius: 8px 8px 0 0;
  }

  &__title {
    margin-left: 8px;
  }

  &__rightText,
  &__right {
    position: absolute;
    right: 8px;
    top: 0;
    color: $primary-color;
    font-size: 14px;
    cursor: pointer;
    padding: 0 8px;
  }

  &__content {
    background-color: #fff;
    border-radius: 0 0 8px 8px;
  }
}
</style>
